<template>
  <div class="news-detail-page">
    <Header />
    <div class="news-detail-wrap">
      <Segmentation border-color="rgba(0,0,0,0.15);">
        <span class="fs-24 fw-800">{{ newsDetailData.new_title_show }}</span>
      </Segmentation>
      <div class="news-detail-wd">
        <div class="news-detail-title">{{ newsDetailData.title }}</div>
        <div class="news-detail-describe">{{ newsDetailData.describe }}</div>
        <div class="news-detail-content" v-html="newsDetailData.content"></div>
        <div class="news-detail-border"></div>
        <div class="feedback-wrap flex flex-colunm align-center">
          <div class="feedback-wrap-title">{{ submitMsg.title }}</div>
          <div class="feedback-wrap-illustration">
            {{ submitMsg.illustration }}
          </div>
          <el-input
            v-model="feedbackData.email"
            :placeholder="submitMsg.eamil"
            class="feedback-wrap-input"
          />
          <el-input
            v-model="feedbackData.context"
            :rows="2"
            type="textarea"
            :placeholder="submitMsg.message"
            class="feedback-wrap-textarea"
          />
          <div class="feedback-wrap-submit" @click="feedbackSend">
            {{ submitMsg.send }}
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Segmentation from '@/components/Segmentation.vue'

const newsDetailData = useState('news-detail-data', () => ({}))

const { $apiFetch } = useNuxtApp()
const { state } = usePageData()
const feedbackData = ref({
  email: '',
  context: '',
})

const submitMsg = ref({})
const route = useRoute()
const { data, error } = await useAsyncData('news-detail-data', () =>
  $apiFetch(`/news/detail`, {
    method: 'GET',
    params: {
      lang: state.value.language,
      id: route.query.id,
    },
  }),
)

if (!error.value) {
  newsDetailData.value = data.value.data
}

const feedbackSend = async () => {
  const { email, context } = feedbackData.value
  const res = await $apiFetch(`/submit`, {
    method: 'POST',
    body: {
      email,
      context,
      lang: state.value.language,
    },
  })
  alert(res.message)
}

onMounted(() => {
  $apiFetch(`/pop_window`, {
    method: 'GET',
    params: {
      lang: state.value.language,
    },
  }).then((res) => {
    submitMsg.value = res.data
  })
})
</script>
<style lang="scss" scoped>
.news-detail-wrap {
  width: 1000px;
  margin: 0 auto;
  margin-bottom: 100px;
  margin-top: 44px;
}
.news-detail-title {
  margin-top: 72px;
  font-weight: 800;
  font-size: 48px;
  color: #171a26;
}
.news-detail-wd {
  width: 800px;
  margin: 0 auto;
}
.news-detail-describe {
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  margin-top: 24px;
}
.news-detail-content {
  margin-top: 72px;
  margin-bottom: 54px;
  min-height: 800px;
  :deep(img) {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
  }
}
.news-detail-border {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.feedback-wrap {
  margin-top: 54px;
  &-title {
    font-weight: bold;
    font-size: 24px;
    color: #000000;
  }
  &-illustration {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
  }
  &-input {
    width: 322px;
    height: 36px;
    margin-top: 24px;
  }
  &-textarea {
    width: 322px;
    height: 72px;
    margin-top: 16px;
  }
  &-submit {
    width: 322px;
    height: 32px;
    background: #00b9ef;
    border: 2px solid #00b9ef;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
